<template>
  <div class="new-add-service-package">
    <!-- 顶部标题 -->
    <div class="top">
      <div></div>
      <span>新增服务包</span>
    </div>
  </div>

  <!-- 中间部分 -->
  <div class="middle clearfix">
    <div class="service-package-information">
      <div class="title" style="text-align: left; width: 90%; padding: 30px">
        服务包信息
      </div>
      <div class="form" style="text-align: left; padding: 20px">
        <el-form
          :inline="true"
          :model="projectDate"
          class="demo-form-inline"
          size="large"
        >
          <el-form-item label="服务包名称">
            <el-input
              v-model="projectDate.serPackageName"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label=" 服务包类型">
            <el-select v-model="projectDate.projectType" placeholder="请输入">
              <el-option label="初级包" value="small" />
              <el-option label="中级包" value="middle" />
              <el-option label="高级包" value="senier" />
              <el-option label="特需定制包" value="spelic" />
            </el-select>
          </el-form-item>
          <el-form-item label="订购价格">
            <el-input v-model="projectDate.projectPrice" placeholder="请输入" />
          </el-form-item>
          <br />
          <el-form-item label="服务对象">
            <el-input v-model="projectDate.serviceUse" placeholder="请输入" />
          </el-form-item>
          <el-form-item label=" 服务包标签">
            <el-select v-model="projectDate.projectType" placeholder="请输入">
              <el-option label="全选" value="all" />
              <el-option label="高血糖" value="gaoxuetang" />
              <el-option label="高血压" value="gaoxueya" />
              <el-option label="慢病护理" value="manbing" />
            </el-select>
          </el-form-item>
          <el-form-item label=" 签约周期">
            <el-select v-model="projectDate.projectType" placeholder="请输入">
              <el-option label="1年" value="oneYear" />
              <el-option label="2年" value="twoYear" />
              <el-option label="3年" value="threeYear" />
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="http://quanzhan.site:5945/api/v1/admin/files"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              style="
                width: 178px;
                height: 178px;
                display: block;
                border: 1px dashed var(--el-border-color);
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: var(--el-transition-duration-fast);
              "
            >
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
                style="width: 178px; height: 178px; display: block"
              />
              <el-icon
                v-else
                class="avatar-uploader-icon"
                style="
                  font-size: 28px;
                  color: #8c939d;
                  width: 178px;
                  height: 178px;
                  text-align: center;
                "
                ><Plus
              /></el-icon>
            </el-upload>
          </el-form-item>
          <br />
          <el-form-item label="服务介绍">
            <el-input
              v-model="projectDate.projectTitle"
              :rows="10"
              type="textarea"
              placeholder="请输入"
              style="width: 700px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="textarea" style="padding: 20px">
        <div
          class="title"
          style="text-align: left; height: 30px; padding: 10px"
        >
          服务详情字段
        </div>
        <div style="font-size: 14px;text-align: left;">
          <el-form
            :inline="true"
            :model="projectDate"
            class="demo-form-inline"
            size="large"
          >
            <el-form-item label="病情描述">
              <el-input
                v-model="projectDate.serviceDetails.illness"
                :rows="10"
                type="textarea"
                placeholder="请输入"
                style="width: 700px;"
              />
            </el-form-item>
            <br>
            <el-form-item label="健康指导">
              <el-input
                v-model="projectDate.serviceDetails.healthAdvice"
                :rows="10"
                type="textarea"
                placeholder="请输入"
                style="width: 700px"
              />
            </el-form-item>
            <br>
            <el-form-item label="备注">
              <el-input
                v-model="projectDate.serviceDetails.beizhu"
                :rows="10"
                type="textarea"
                placeholder="请输入"
                style="width: 730px"
              />
            </el-form-item>
            <br>
          </el-form>
        </div>
      </div>
    </div>
    <div style="text-align:left">
      <el-button type="primary" @click="open">提交审核</el-button>
      <el-button plain >返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewAddServicePackage",
  data() {
    return {
      projectDate: {
        id: Math.random() + 1,
        serPackageName: "",
        projectName: "",
        timeNum: 2,
        projectType: '',
        projectPrice: 3,
        projectTitle: '',
        serviceUse: "",
        serviceDetails: {
          illness: "",
          healthAdvice: "",
          beizhu: "",
        },
      },

      imageUrl: "",
    };
  },
  methods: {
    beforeAvatarUpload: (rawFile) => {
      if (rawFile.type !== "image/jpeg") {
        // 格式
        ElMessage.error("只能上传jpg格式的图片!");
        return false;
      }
      if (rawFile.size / 1024 / 1024 > 2) {
        // 大小
        ElMessage.error("文件大小不能超过2MB!");
        return false;
      }
      return true;
    },
    handleAvatarSuccess: (response, uploadFile) => {
      console.log("response:", response);
      this.imageUrl.value = URL.createObjectURL(uploadFile.raw);
    },
    open() {
        this.$confirm('此操作将提交审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style lang="less" scoped>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}
.new-add-service-package {
  padding: 20px;
  .top {
    padding: 10px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 22px;
    margin-top: 10px;
    div {
      width: 5px;
      height: 25px;
      background: blue;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  .middle {
    padding: 10px;
    .service-package-information {
      .title {
        height: 40px;
        float: left;
        line-height: 40px;
      }
      .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
      }

      .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
      }

      .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
      }
    }
  }
}
</style>
